<template>
  <lay-container fluid="true" style="padding: 10px">
    <div class="docInfo">
      <div class="title">{{ docPost.title }}</div>
      <div class="info">登记人： {{ docPost.nickName }} 登记时间： {{ docPost.insertTime }}</div>
    </div>
    <lay-line></lay-line>
    <lay-card style="padding:10px;">
      <lay-row space="10">
        <lay-col md="8">
          <lay-form-item label="标记">
            <lay-select v-model="form.mark" style="width:130px;">
              <lay-select-option :value="0" label="选择标记"></lay-select-option>
              <lay-select-option v-for="item in docMarkType" :value="item.key" :label="item.value">
              </lay-select-option>
            </lay-select>
          </lay-form-item>
        </lay-col>
        <lay-col md="16" v-if="markStatus > 0">
          <span><lay-button @click="delMark(form.id)" type="danger" v-permission="PerKey.DocPost_Mark"
              prefix-icon="layui-icon-ok-circle">
              删除标记
            </lay-button></span>
          <span> {{ docPost.markName }} 于{{ docPost.greatTime }} 标记 </span>
        </lay-col>
        <lay-col md="24">
          <lay-form-item label="备注">
            <lay-col md="24">
              <lay-textarea placeholder="请输入备注" :rows="2" :cols="10" v-model="form.remark"></lay-textarea>
            </lay-col>
          </lay-form-item>
        </lay-col>
        <lay-col :md="24" class="saveBtn">
          <lay-button @click="submitClick" type="primary" v-permission="PerKey.DocPost_Mark"
            prefix-icon="layui-icon-ok-circle">
            标记
          </lay-button>
        </lay-col>
      </lay-row>
    </lay-card>
  </lay-container>
</template>

<script lang="ts" name="DocPostMark" setup>
import { ref, toRefs, reactive } from "vue";
import { layer } from "@layui/layer-vue";
import { postInsertOrUpdate, getDocPostMark, delOneMark } from "../../../../../api/module/oas/docpost";
import { PerKey } from "../../../../../library/permissionConst"
import { DocPostMark, ViewDocPostMark } from '../../../../../types/doc'
import Util from '../../../../../library/Util'
interface sProps {
  docId: number,
}
const props = withDefaults(defineProps<sProps>(), {
  docId: 0,
});

const docMarkType = ref()
docMarkType.value = Util.dictfilter("Sys_Doc_Mark_Type")

const data = reactive({
  form: <DocPostMark><unknown>[],
  docPost: <ViewDocPostMark><unknown>[],
})

const { form, docPost } = toRefs(data)
const markStatus = ref()
getDocPostMark(props.docId).then((res) => {
  if (res.status == 1) {
    let data = res.data.data
    form.value = {
      id: data.id,
      aid: data.aid,
      uid: data.uid,
      mark: data.mark,
      remark: data.remark,
    }
    markStatus.value = data.mark;
    docPost.value = {
      title: data.title,
      nickName: data.nickName,
      markName: data.markName,
      insertTime: data.insertTime,
      mark: 0,
      greatTime: data.greatTime
    }
  }
})

const emits = defineEmits(['update:dialogIsOk'])

const submitClick = function () {
  if (form.value.mark < 1) {
    layer.msg("请选择标记！");
    return;
  }
  postInsertOrUpdate(form.value).then((res) => {
    if (res.status == 1) {
      layer.msg(res.msg, { time: 1000, icon: 1 }, () => {
        emits('update:dialogIsOk', 1)
      });
    } else {
      layer.msg(res.msg, { icon: 2 });
      return false;
    }
  });
}

const delMark = function (id: number) {
  layer.confirm("确认删除该标记吗？", {
    title: "警告", move: "true", shade: "false", shadeClose: "true",
    btn: [{
      text: '确认', callback: (layerId: number) => {
        delOneMark(id).then((res) => {
          if (res.status == 1) {
            layer.msg(res.msg, { time: 1000, icon: 1 }, () => {
              emits('update:dialogIsOk', 1)
            });
          } else {
            layer.msg(res.msg);
          }
          layer.close(layerId);
        })
      }
    }, {
      text: '取消', callback: function (layerId: number) {
        layer.close(layerId);
      }
    }]
  })

}
</script>

<style scoped>
.docInfo {
  padding: 5px;
  text-align: center;
}

.title {
  font-size: 20px;
  line-height: 30px;
}

.info {
  font-size: 14px;
  line-height: 22px;
}
</style>